<template>
  <views class="enterprise_account_setting">
    <!-- 新增账户 -->
    <div class="add_account">
      <modelBox :show="add_show">
        <div class="add_lists">
          <div class="flex flexR add_lists_title">
            <viewTitle :title="'添加充值账户'" :border="false"></viewTitle>
            <div class="el-icon-close cp" @click="close_Model"></div>
          </div>
          <div class="add_input_lists">
            <div class="flex flexR center add_inputs">
              <div class="add_input_lists_title">开户名称</div>
              <div class="add_input_lists_item">{{enterprise_name||''}}</div>
            </div>
          </div>
          <div class="add_input_lists">
            <div class="flex flexR center add_inputs">
              <div class="add_input_lists_title">开户银行</div>
              <div class="add_input_lists_item">
                <el-input placeholder="请输入开户银行，如北京银行" v-model="bank_name" clearable></el-input>
              </div>
            </div>
          </div>
          <div class="add_input_lists">
            <div class="flex flexR center add_inputs">
              <div class="add_input_lists_title">银行卡号</div>
              <div class="add_input_lists_item">
                <el-input placeholder="请输入银行卡号" v-model="bank_sn" clearable></el-input>
              </div>
            </div>
          </div>
          <!-- 确认 取消 -->
          <div class="Confirm_cancel flex flexR center">
            <el-button type="primary" @click="add_get_Account(1)">确定</el-button>
            <el-button type @click="close_Model">取消</el-button>
          </div>
        </div>
      </modelBox>
    </div>

    <!-- 账户说明 -->
    <div>
      <viewTitle :title="'账户说明'" :border="true"></viewTitle>
      <div class="explain">
        <div class="explain_list flex flexC">
          <div class="explain_list_flex flex flexC">
            <div>1.企业充值账户是企业用于给服务商充值转账时的资金账户;</div>
            <div>2.企业最多可以添加10个企业充值账户（开户名称必须与企业名称一致）;</div>
            <div>3.企业使用已添加的账户对服务商进行充值转账时，平台自动同步充值转账信息并入账至企业账户。</div>
            <div class="color">注: 若使用企业充值账户列表中没有的账户进行充值转账，平台可能无法同步充值信息并入账企业账户。请使用账户列表中的账户进行充值转账。</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 账户设置 -->
    <div class="setting">
      <div class="setting_top flex flexR">
        <viewTitle :title="'账户说明'" :border="true"></viewTitle>
        <div class="btn" @click="add_account" v-if="isAdd" >+新增充值账户</div>
      </div>
      <div class="table_list">
        <div class="hint">最多添加10个账户</div>
        <div>
          <el-table
            :data="tableData"
            style="width: 100%"
            :header-cell-style="getRowClass"
            :select-on-indeterminate="true"
            :fit="true"
            :lazy="true"
            border
          >
            <el-table-column type="index" label="序号" width="100"></el-table-column>
            <el-table-column prop="bank_account_name" label="开户名称" width="180"></el-table-column>
            <el-table-column prop="bank_name" label="开户银行"></el-table-column>
            <el-table-column prop="bank_sn" label="银行账号"></el-table-column>
            <el-table-column prop="address" fixed="right" label="操作" v-if="isDelete">
              <div class="table_operation" slot-scope="scope">
                <el-button type="danger" @click="delete_(scope.row.enterprise_bank_id)">删除</el-button>
              </div>
            </el-table-column>
          </el-table>
          <div class="paging flex flexR">
            <el-pagination
              style="background:#fff; padding:10px 0"
              background
              layout="total, sizes,prev, pager, next, jumper"
              @size-change="(page_size) => {this.pagination.page_size = page_size;this.getData()}"
              @current-change="(page_size) => {this.pagination.page_start = page_size;this.getData()}"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="pagination.page_size"
              :total="pagination.total_count"
              :current-page="pagination.current_page"
              :page-count="pagination.page_count"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </views>
</template>


<script>
import { mapGetters } from 'vuex';

export default {
  data() {
    return {
      tableData: [],
      add_show: false, // 新增账户
      bank_name: "", // 开户银行
      bank_sn: "", // 银行卡号
      pagination: {}, // 账户设置-分页
      enterprise_name:"",// 开户名称
      
    };
  },
  computed:{
    ...mapGetters(['getButtonPermission']),
    isAdd(){
      return  this.getButtonPermission[this.$route.path]  &&  this.getButtonPermission[this.$route.path].add ? 1 : 0;
    },
    isDelete(){
      return  this.getButtonPermission[this.$route.path]  &&  this.getButtonPermission[this.$route.path].delete ? 1 : 0;
    }
  },
  methods: {
    //    修改第一行样式
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background: #FAFAFA ";
      } else {
        return "";
      }
    },
    //     点击单行
    clickRow(row, column, event) {
      console.log(row, column, event);
    },
    //    修改是否换行
    changeStyleRow(width) {
      let _width = width - 290 - 350 - 300 - 50 - 25;
      if (_width > 300) {
        this.marginLeft = 25;
      } else {
        this.marginLeft = 0;
      }
    },
    close_Model() {
      this.add_show = false;
      this.bank_name=""; // 开户银行
      this.bank_sn=""; // 银行卡号
    },
    add_account() {
      this.add_show = true;
    },
    getData() {
      let data = this.$api.sendSync(this.$mapapi.e_bankAccount, {});
      if (data.code != 200&&data.code!=501) {
        this.$message.error(data.msg);
        return;
      }
      this.pagination = data.data.pagination;
      this.tableData = data.data.data || [];
    },
    // 删除
    delete_(id) {
      let data = this.$api.sendSync(this.$mapapi.e_delBank, {
        enterprise_bank_id: id
      });
      if (data.code != 200) {
        this.$message.error(data.msg);
        return;
      }
      this.$message.error(data.msg);
      this.getData();
    },
    // 获取开户名称/新增充值账号
    add_get_Account(type) {
      let datas = {};
      if (type == 1) {
        datas.action = "add";
      }
      datas.bank_name = this.bank_name;
      datas.bank_sn = this.bank_sn;
      let data = this.$api.sendSync(this.$mapapi.e_addAccount, datas);
      if (data.code != 200) {
        this.$message.error(data.msg);
        return;
      }
      if(type==1){
         this.$message.success(data.msg);
         this.getData();
      }else{
         this.enterprise_name=data.data.enterprise_name||'';
      }
      this.add_show=false;
      this.close_Model()

    }
  },
  mounted() {
    this.getData();
    this.add_get_Account(0)
  },
  created() {}
};
</script>








<style lang="less"  :scope="true"  src="@/style/enterprise/enterprise_account_setting.less" >
</style>